import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';

const styles = {

};

class TemporaryDrawer extends React.Component {
    state = {
        top: false,
        left: false,
        bottom: false,
        right: false,
    };

    toggleDrawer = (side, open) => () => {
        this.setState({
            [side]: open,
        });
    };

    renderStruction = ()=>{
        const {lists, top, left, bottom, right, children, listWidth } = this.props;
        const sideList = (
            <div>
                {lists}
            </div>
        );

        const fullList = (
            <div>
                {lists}
            </div>
        );

        if (top === true) {
            return (
                <div>
                    <div onClick={this.toggleDrawer('top', true)}>{children}</div>
                    <Drawer anchor="top" open={this.state.top} onClose={this.toggleDrawer('top', false)}>
                        <div
                            tabIndex={0}
                            role="button"
                            onClick={this.toggleDrawer('top', false)}
                            onKeyDown={this.toggleDrawer('top', false)}
                        >
                            {fullList}
                        </div>
                    </Drawer>
                </div>)
        }
        else if(left === true) {
            return (
                <div>
                    <div onClick={this.toggleDrawer('left', true)}>{children}</div>
                    <Drawer open={this.state.left} onClose={this.toggleDrawer('left', false)}>
                        <div
                            tabIndex={0}
                            role="button"
                            onClick={this.toggleDrawer('left', false)}
                            onKeyDown={this.toggleDrawer('left', false)}
                        >
                            {sideList}
                        </div>
                    </Drawer>
                </div>
            )
        }
        else if (bottom === true) {
            return (
                <div>
                    <div onClick={this.toggleDrawer('bottom', true)}>{children}</div>
                    <Drawer
                        anchor="bottom"
                        open={this.state.bottom}
                        onClose={this.toggleDrawer('bottom', false)}
                    >
                        <div
                            tabIndex={0}
                            role="button"
                            onClick={this.toggleDrawer('bottom', false)}
                            onKeyDown={this.toggleDrawer('bottom', false)}
                        >
                            {fullList}
                        </div>
                    </Drawer>
                </div>)
        }
        else if (right === true) {
            return (
                <div>
                    <div onClick={this.toggleDrawer('right', true)}>{children}</div>
                    <Drawer anchor="right" open={this.state.right} onClose={this.toggleDrawer('right', false)}>
                        <div
                            tabIndex={0}
                            role="button"
                            onClick={this.toggleDrawer('right', false)}
                            onKeyDown={this.toggleDrawer('right', false)}
                        >
                            {sideList}
                        </div>
                    </Drawer>
                </div>
            )
        }
        else {
            return (
                <div>
                    <div onClick={this.toggleDrawer('left', true)}>{children}</div>
                    <Drawer open={this.state.left} onClose={this.toggleDrawer('left', false)}>
                        <div
                            tabIndex={0}
                            role="button"
                            onClick={this.toggleDrawer('left', false)}
                            onKeyDown={this.toggleDrawer('left', false)}
                        >
                            {sideList}
                        </div>
                    </Drawer>
                </div>
            )
        }
    }
    render() {
        return (
            <div>
                {this.renderStruction()}
            </div>
        );
    }
}

TemporaryDrawer.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(TemporaryDrawer);
